<template>
  <el-header>
    <el-menu
      :default-active="activeIndex2"
      class="el-menu-demo"
      mode="horizontal"
      @select="handleSelect"
      background-color="#545c64"
      text-color="#fff"
      active-text-color="#ffd04b"
    >
      <template
        v-for="item in routerList"
        :key="item.meta.index">
        <template v-if="!item.children || !item.children.length">
          <el-menu-item
            :index="item.meta.index"
          >
            <router-link type="primary" :to="item.path">{{ item.meta.name }}</router-link>
          </el-menu-item>
        </template>
        
        <template v-if="item.children && item.children.length">
          <el-submenu
            :index="item.meta.index"
          >
            <template #title>{{ item.meta.name }}</template>
            <el-menu-item
              v-for="child in item.children"
              :key="child.meta.index"
              :index="child.meta.index"
            >
              <router-link type="primary" :to="child.path">{{ child.meta.name }}</router-link>
            </el-menu-item>
          </el-submenu>
        </template>
        
      </template>
    </el-menu>
  </el-header>
</template>

<script lang="ts">
import { ref, defineComponent } from "vue";
export default defineComponent({
  name: "CommonHeader",
  setup: () => {
    return {
      activeIndex2: "1",
    };
  },
  methods: {
    created() {
      console.log(this.routerList);
    },
    handleSelect(key: any, keyPath: any) {
      console.log(key, keyPath);
    },
  },
  computed: {
    routerList(): any {
      return this.$router.getRoutes().filter((e: any) => e.children.length);
    },
  },
});
</script>

<style scoped lang="less">
  a {
    color: @base-color;
  }
</style>
